<template>
  <div>
    <el-drawer
      title="我是标题"
      :visible.sync="DrawerVisible.show"
      size="75%"
      :wrapperClosable="false"
      :with-header="false">
      <!-- 头部 -->
      <div class="detailHead row space_between">
        <div>检查状态：{{examInfo.work_state}}</div>
        <div class="row f20 strong">
          <p>{{placer_orders.patient_name}}</p>
          <p class="mr50 ml50">{{placer_orders.patient_sex}}</p>
          <p>{{placer_orders.detail_age}}岁</p>
        </div>
        <div></div>
      </div>
      <!-- 详情内容-->
      <div class="detailContent pl50 pr50">
        <!-- tab -->
        <div class="bbd row">
          <ul class="checkList row f14 clr_666 col">
            <li class="pl20 pr20 fwb cursor" v-for="(item, index) in list" :key="index" :class="isActive == index ? 'active':''" @click="changeNav(index,item)">{{item}}</li>
          </ul>
          <div >
            <more-button/>
          </div>
        </div>
        <!-- 患者详情 -->
        <div>
          <el-row class="mt20 mb15">
            <el-col :span="6"><div class="row"><div class="leftTip">病例号：</div><span>{{placer_orders.med_rec_no}}</span></div></el-col>
            <el-col :span="6"><div class="row"><div class="leftTip">检查号：</div><span>{{examInfo.accession_number}}</span></div></el-col>
            <el-col :span="6"><div class="row"><div class="leftTip">手机号：</div><span>{{placer_orders.phone_no}}</span></div></el-col>
            <el-col :span="6"><div class="row"><div class="leftTip longtip">身份证ID：</div><span>{{placer_orders.id_card_no}}</span></div></el-col>
          </el-row>
          <el-row class="mb15">
            <el-col :span="6"><div class="row"><div class="leftTip">就诊类别：</div><span>{{placer_orders.patient_class}}</span></div></el-col>
            <el-col :span="6"><div class="row"><div class="leftTip">检查类型：</div><span>{{placer_orders.service_sect_id}}</span></div></el-col>
            <el-col :span="6"><div class="row"><div class="leftTip">职业：</div><span>{{placer_orders.occupation}}</span></div></el-col>
            <el-col :span="6"><div class="row"><div class="leftTip longtip">登记时间：</div><span>{{examInfo.reg_time}}</span></div></el-col>
          </el-row>
          <div class="flex_row mb15"><div class="leftTip flex_shgr">检查项目：</div><div>{{examInfo.examination_item_name}}</div></div>
          <div class="flex_row mb15"><div class="leftTip flex_shgr">病史摘要：</div><div>{{placer_orders.medical_record}}{{placer_orders.adverse_reaction}}</div></div>
          <div class="flex_row mb15"><div class="leftTip flex_shgr">临床诊断：</div><div>{{placer_orders.clinic_diagnosis}}</div></div>
          <el-row class="mb15">
            <el-col :span="6"><div class="row"><div class="leftTip">申请医院：</div><span>{{placer_orders.request_org_name}}</span></div></el-col>
            <el-col :span="6"><div class="row"><div class="leftTip">申请科室：</div><span>{{placer_orders.request_dept_name}}</span></div></el-col>
            <el-col :span="6"><div class="row"><div class="leftTip">申请医生：</div><span>{{placer_orders.provider_name}}</span></div></el-col>
            <el-col :span="6"><div class="row"><div class="leftTip longtip">申请医生手机号：</div><span>{{placer_orders.provider_phone}}</span></div></el-col>
          </el-row>
          <div class="flex_row mb20"><div class="leftTip flex_shgr">申请时间：</div><div>{{placer_orders.requested_time}}</div></div>
          <div class="flex_row mb20"><div class="leftTip flex_shgr">检查技术：</div><div>{{placer_orders.requested_time}}</div></div>
        </div>
        <!-- 报告信息 -->
        <div v-if="Object.keys(this.report_info).length != 0">
          <div class="mb20 clear detailTitle">
            <span class="f16 strong">报告信息</span>
            <span class="titleLine ml20 mr20"></span>
            <!-- <span @click="showDiapatch = !showDiapatch" class="fr cursor">
              展开
              <i v-show="!showDiapatch" class="el-icon-arrow-right"></i>
              <i v-show="showDiapatch" class="el-icon-arrow-down"></i>
            </span> -->
          </div>
          <div>
            <div class="flex_row mb20"><div class="leftTip flex_shgr">影像所见：</div><div>{{report_info.findings}}</div></div>
            <div class="flex_row mb20"><div class="leftTip flex_shgr">影像诊断：</div><div>{{report_info.diagnosis}}</div></div>
            <div class="flex_row mb20"><div class="leftTip flex_shgr">建议：</div><div>{{report_info.recommend}}</div></div>
            <el-row class="mb15">
              <el-col :span="6"><div class="row"><div class="leftTip">报告医生：</div><span>{{report_info.result_assistant_name}}</span></div></el-col>
              <el-col :span="6"><div class="row"><div class="leftTip">审核医生：</div><span>{{report_info.result_principal_name}}</span></div></el-col>
              <el-col :span="6"><div class="row"><div class="leftTip">修订医生：</div><span>{{report_info.result_revise_name}}</span></div></el-col>
              <el-col :span="6"><div class="row"><div class="leftTip">审核时间：</div><span>{{report_info.audit_start_time}}</span></div></el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="row flex_center">
        <el-button size="small" @click="closeDrawer">关闭</el-button>
        <el-button size="small" type="primary" @click="printIn" v-if="Object.keys(this.report_info).length != 0">打印报告</el-button>

      </div>
    </el-drawer>
  </div>
</template>
<script>
// import MoreButton from '@/components/pacs/components/MoreButton'
// import { fetchExamsDetail } from '@/api/pacs_template' // 接口

export default {
  props: {
    DrawerVisible: { type: Object },
    rowItem: { type: Object }
  },
  data () {
    return {
      list: ['报告信息', '内镜影像', '相关检查'],
      isActive: 0,
      id: '',
      examInfo: {}, // 检查信息
      placer_orders: {}, // 基本信息
      report_info: {} // 报告信息
    }
  },
  mounted () {
  },
  methods: {
    async fetchExamsDetail () {
      // var params = {
      //   id: this.id
      // }
      var res = await fetchExamsDetail({ id: this.id })
      this.examInfo = res.data
      this.placer_orders = res.data.placer_orders[0]
      if (res.data.report_info) {
        this.report_info = res.data.report_info
      }
      console.log('fetchExamsDetail', res.data.placer_orders[0], 'this.placer_orders', this.placer_orders)
    },
    printIn () { // 打印
    },
    closeDrawer () { // 关闭Drawer
      this.DrawerVisible.show = false
    },
    changeNav (index) { // 切换tab
      this.isActive = index
    }
  },
  watch: {
    rowItem (val) {
      console.log('rrrrrowItm', val)
      this.id = val.id
      this.examInfo = {}
      this.placer_orders = {}
      this.report_info = {}
      this.fetchExamsDetail()
    }
  },
  components: {
    MoreButton
  }
}
</script>
<style lang="less" scoped>
  // 头部
  .detailHead {
    width: 100%;
    height: 60px;
    color: #333;
    border-bottom: 1px solid #D8D8D8;
    padding: 0 43px;
  }
  //tab
  .checkList {
    line-height: 45px;
  }
  .active {
    border-bottom: 2px solid #409EFF !important;
    color: #1A051D !important;
  }
  // 详情
  .leftTip {
    display: flex;
    width: 80px;
    color: #999;
    justify-content:flex-end;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .longtip {
    width: 120px;
  }
  // w
  .detailTitle{
    display: flex;
    height:18px;
    line-height: 18px;
  }
  .titleLine{
    margin-top: 8px;
    flex: 1;
    height: 1px;
    background:#E5E9EE;
  }
</style>
